"use strict";
window.onload = () => {
    class Wujie extends HTMLElement {
        constructor() {
            super();
            //  我们先创建一个shadowdom sha diu dom
            //  shadowdom 样式隔离;   不会影响外层样式
            let dom = this.attachShadow({ mode: "open" });
            let template = document.querySelector("#wujie");
            // 这样就可以吧template 里面的内容渲染到wu-jie 组件里
            dom.appendChild(template.content.cloneNode(true)); //true 深度克隆
            console.log("get atter ===", this.getAttr("url"), this.getAttr("age"));
            //   this.connectedcallback();
            //   this.disconnectedCallback();
            //   this.attributeChangedCallback("age", 10, 20);
        }
        /**
         * 传参 获取属性值
         */
        getAttr(attr) {
            return this.getAttribute(attr);
        }
        //   生命周期
        //生命周期自动触发有东西插入
        connectedCallback() {
            console.log("类似于vue 的mounted");
        }
        //生命周期卸载
        disconnectedCallback() {
            console.log("类似于vue 的destory");
        }
        //跟watch类似
        attributeChangedCallback(name, oldVal, newVal) {
            console.log("跟vue 的watch 类似 有属性发生变化自动触发");
        }
    }
    //类似于vue组件 原生js写的一个组件
    window.customElements.define("wu-jie", Wujie); //挂载完成
};
